<template>
  <div class="container">
    <div class="top_bar clearfix">
      <div class="title fl">请选择您需要查看材料/流程具体部门</div>
      <div class="input_box fr" style="display:none">
        <input type="text" placeholder="请输入办事事项...">
        <i class="s_icon"></i>
      </div>
    </div>
    <div class="department_b clearfix">
      <template v-for="(img, text) in imgs" v-bind:img="img" v-bind:text="text">
        <a :href="img.link" target="_blank" v-bind:key="img.id">
          <div class="item">
            <img :src="img.img" alt="">
            <div class="text">{{img.text}}</div>
          </div>
        </a>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        imgs: [
          {
            img: '../../static/images/1_01.png',
            text: '社会审批',
            link: 'http://joygov.com:8888/class%20two_008.html'
          },
          {
            img: '../../static/images/1_02.png',
            text: '注册类审批',
            link: 'http://joygov.com:8888/class%20two_009.html'
          },
          {
            img: '../../static/images/1_03.png',
            text: '经济类审批',
            link: 'http://joygov.com:8888/class%20two_013.html'
          },
          {
            img: '../../static/images/1_04.png',
            text: '建设类审批',
            link: 'http://joygov.com:8888/class%20two_015.html'
          },
          {
            img: '../../static/images/1_05.png',
            text: '地税局',
            link: 'http://joygov.com:8888/class%20two_003.html'
          },
          {
            img: '../../static/images/1_06.png',
            text: '烟草专卖局',
            link: 'http://joygov.com:8888/class%20two_005.html'
          },
          {
            img: '../../static/images/1_07.png',
            text: '规划局',
            link: 'http://joygov.com:8888/class%20two_006.html'
          },
          {
            img: '../../static/images/1_08.png',
            text: '人社局',
            link: 'http://joygov.com:8888/class%20two_004.html'
          },
          {
            img: '../../static/images/1_09.png',
            text: '国土局',
            link: 'http://joygov.com:8888/class%20two_012.html'
          },
          {
            img: '../../static/images/2_01.png',
            text: '消防大队',
            link: 'http://joygov.com:8888/class%20two_010.html'
          },
          {
            img: '../../static/images/2_02.png',
            text: '建设局',
            link: 'http://joygov.com:8888/class%20two_011.html'
          },
          {
            img: '../../static/images/2_03.png',
            text: '教育局',
            link: 'http://joygov.com:8888/class%20two_017.html'
          },
          {
            img: '../../static/images/2_04.png',
            text: '交通局',
            link: 'http://joygov.com:8888/class%20two_018.html'
          },
          {
            img: '../../static/images/2_05.png',
            text: '国税局',
            link: 'http://joygov.com:8888/class%20two_019.html'
          },
          {
            img: '../../static/images/2_06.png',
            text: '公证处',
            link: 'http://joygov.com:8888/class%20two_020.html'
          },
          {
            img: '../../static/images/2_07.png',
            text: '公安局',
            link: 'http://joygov.com:8888/class%20two_021.html'
          },
          {
            img: '../../static/images/2_08.png',
            text: '电信窗口',
            link: 'http://joygov.com:8888/class%20two_022.html'
          },
          {
            img: '../../static/images/2_09.png',
            text: '武侯邮政分局',
            link: 'http://joygov.com:8888/class%20two_023.html'
          },
          {
            img: '../../static/images/3_01.png',
            text: '帮办',
            link: 'http://joygov.com:8888/class%20two_024.html'
          },
          {
            img: '../../static/images/3_02.png',
            text: '发证',
            link: 'http://joygov.com:8888/class%20two_025.html'
          },
          {
            img: '../../static/images/3_03.png',
            text: '前置咨询服务',
            link: 'http://joygov.com:8888/class%20two_026.html'
          },
          {
            img: '../../static/images/3_04.png',
            text: '管理服务窗口',
            link: 'http://joygov.com:8888/class%20two_027.html'
          },
          {
            img: '../../static/images/3_05.png',
            text: '报建项目审批',
            link: 'http://joygov.com:8888/class%20two_028.html'
          }
        ]
      }
    }
  }
</script>


<style scoped>
.container {
  padding: 30px 0;
}

.title {
  font-size: 18px;
  color: #333;
}

.input_box {
  width: 228px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #e82822;
}

.input_box input {
  float: left;
  padding: 0 10px;
  width: 180px;
  height: 28px;
  color: #666;
  border: 0;
}

.input_box .s_icon {
  float: left;
  width: 28px;
  height: 28px;
  background: url(../../static/images/search.png);
  cursor: pointer;
}

.department_b {
  padding: 50px 0 20px 0;
}

.department_b .item {
  margin-bottom: 55px;
  float: left;
  width: 133.33px;
  text-align: center;
}

.department_b .item .text {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>
